<template>
	<view class="container">
		<MCalendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false" @change="change"
			@monthSwitch="monthSwitch" />
	</view>
</template>

<script>
	import MCalendar from "./components/m-calendar/m-calendar.vue"
	import {getDate} from "./utils/date.js"
 
	export default {
		components: {
			MCalendar
		},
		data() {
			return {
				info: {
					lunar: false,
					range: false,
					insert: false,
					selected: []
				}
			}
		},
		onReady() {
			this.$nextTick(() => {
				this.showCalendar = true
			})
			// TODO 模拟请求异步同步数据
			setTimeout(() => {
				console.log(getDate(new Date(), 0).fullDate,"11111111111111")
				// this.info.date = getDate(new Date(), -30).fullDate
				// this.info.startDate = getDate(new Date(), -60).fullDate
				// this.info.endDate = getDate(new Date(), 30).fullDate
				this.info.selected = [{
						date: getDate(new Date(), -3).fullDate,
						info: '借支'
					},
					{
						date: getDate(new Date(), -2).fullDate,
						info: '借支',
						time: '12小时',
						data: {
							custom: '自定义信息',
							name: '自定义消息头'
						}
					},
					{
						date: getDate(new Date(), -1).fullDate,
						time: '12小时',
					},
					{
						date: getDate(new Date(), 0).fullDate,
						time: '12小时',
					}
				]
			}, 2000)
		},
		methods: {
			change(e) {
				console.log('change 返回:', e)
				// 模拟动态打卡
				// if (this.info.selected.length > 5) return
				// this.info.selected.push({
				// 	date: e.fulldate,
				// 	info: '打卡',
				// 	data: {
				// 		custom: '自定义信息23',
				// 		name: '自定义消息头23'
				// 	}
				// })
			},
			monthSwitch(e) {
				console.log('monthSwitchs 返回:', e)
			}
		}
	}
</script>



<style lang="scss" scoped>

</style>